<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link rel="stylesheet" href="/js/plugins/bootstrap/css/bootstrap.css">
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/regist.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/plugins/valicate/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/js/plugins/valicate/localization/messages_zh.js"></script>
    <script type="text/javascript" src="/js/system/common.js"></script>
    <script type="text/javascript" src="/js/system/regist.js"></script>

</head>

<body>
<div class="wrapper">
    <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
            <div class="login-box" id="_j_login_box">
                <div class="inner inner_v2 clearfix">
                    <div class="inner_v2_left">
                        <form id="_j_login_form" action="javascript:;">
                            <div class="form-field">
                                <input id="inputPassword" type="text" placeholder="您的手机号" autocomplete="off" value="">
                                <div class="err-tip"></div>
                            </div>
                            <div class="submit-btn">
                                <button id="_js_loginBtn">立即注册</button>
                            </div>
                        </form>
                        <div class="agreement">
                            注册视为同意<a target="_blank" href="javascript:;">《骡窝窝用户使用协议》</a>
                        </div>
                        <div class="connect">
                            <p class="hd">用合作网站账户直接登录</p>
                            <div class="bd">
                                <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                                <a href="javascript:;" class="qq"><i></i>QQ</a>
                                <a href="javascript:;" class="weixin"><i></i>微信</a>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="inner_v2_right">
                        <img src="/images/qrcode.jpg">
                        <p>扫一扫<br>下载骡窝窝APP</p>
                    </div>
                </div>
            </div>
            <div class="signup-box" style="display: none;">
                <div class="add-info">
                    <div class="hd">账号注册</div>
                    <form action="/userRegist" method="post" id="editForm">
                        <input type="hidden" name="phone" value="" id="phone">
                        <div class="form-field m-t-10">
                            <input name="nickname" type="text" placeholder="您的昵称">
                            <div class="err-tip"></div>
                        </div>
                        <div class="form-field">
                            <input name="password" type="password" id="password" placeholder="您的密码">
                            <div class="err-tip"></div>
                        </div>
                        <div class="form-field">
                            <input name="rpassword" type="password" id="rpassword" placeholder="确认密码">
                            <div class="err-tip"></div>
                        </div>

                        <div class="form-field">
                            <div class="clearfix">
                                <a href="#" class="vcode-send sms-code-send">获取验证码</a>
                                <input name="verifyCode" type="text" placeholder="短信验证码" autocomplete="off"
                                       class="vcode-input">
                            </div>
                            <div class="err-tip clearfix"></div>
                        </div>
                        <div class="submit-btn">
                            <button type="button" id="myregist">完成注册</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <script>
        $(function () {
            $('#myregist').click(function () {
                var val = $('#inputPassword').val();

                // 正则表达式/^1\d{10}$/
                // 10个0到9的任意数字
                if (/^1\d{10}$/g.test(val)) {

                    //进行数据验证
                    $.get("/checkPhone", {phone: val}, function (data) {
                        if (data) {
                            $('#inputPassword').next().text('').hide()
                            $('.login-box').hide()
                            $('.signup-box').show()
                            $("#phone").val(val);
                        } else {
                            $('#inputPassword').next().text('手机号码已注册.').show()
                        }
                    })
                } else {
                    $('#inputPassword').next().text('手机号码格式不正确').show()
                }
            });

            //短信发送
            $('.vcode-send').click(function () {
                if ($(this).hasClass('disabled')) {
                } else {
                    var self = $(this);
                    var count = 10;
                    self.addClass('disabled')
                    self.text(count + '秒后重新获取')
                    var timer = setInterval(function () {
                        count--;
                        if (count > 0) {
                            self.text(count + '秒后重新获取');
                        } else {
                            clearInterval(timer)
                            self.text('重新获取验证码')
                            self.removeClass("disabled");
                        }

                    }, 1000);

                    var phone = $("#phone").val();
                    $.get("/sendVerifyCode", {phone: phone}, function (data) {
                        if (data.success) {
                            popup("发送成功")
                        } else {
                            popup(data.msg);
                        }
                    })
                }
            });

        });
    </script>
</div>
<div class="fullscreen-bg"
     style="background-image: url(https://images.mafengwo.net/images/signup/wallpaper/27.jpg);">
    <img src="/27.jpg" style="width: auto; height: 657px; margin-top: -213px;">
</div>
</body>
</html>